<template>
  <view class="order-confirm">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-bg"></view>
      <view class="header-content">
        <view class="page-title">确认订单</view>
        <view class="page-subtitle">请确认订单信息后提交</view>
      </view>
    </view>

    <view class="content-container">
      <!-- 收货地址卡片 -->
      <view class="card address-card" @click="selectAddress">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper address-icon">
              <uni-icons type="location-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">收货地址</text>
          </view>
          <view class="header-right">
            <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
          </view>
        </view>
        
        <view v-if="address" class="address-content">
          <view class="address-main">
            <view class="contact-info">
              <text class="contact-name">{{ address.name }}</text>
              <text class="contact-phone">{{ address.phone }}</text>
            </view>
            <view class="address-text">
              {{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}
            </view>
          </view>
          <view class="address-badge">
            <text>默认</text>
          </view>
        </view>
        
        <view v-else class="address-empty">
          <view class="empty-icon">
            <uni-icons type="plus" size="24" color="#909399"></uni-icons>
          </view>
          <view class="empty-content">
            <text class="empty-title">添加收货地址</text>
            <text class="empty-desc">请选择或新增收货地址</text>
          </view>
        </view>
      </view>

      <!-- 商品信息卡片 -->
      <view class="card goods-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper goods-icon">
              <uni-icons type="shop-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">商品清单</text>
          </view>
          <view class="goods-count">{{ goodsList.length }}件商品</view>
        </view>
        
        <view class="goods-content">
          <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
            <view class="item-image">
              <image :src="item.image" mode="aspectFill"></image>
              <view class="item-badge">{{ item.quantity }}</view>
            </view>
            <view class="item-info">
              <view class="item-name">{{ item.name }}</view>
              <view class="item-spec" v-if="item.specName">{{ item.specName }}</view>
              <view class="item-price">¥{{ item.price }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 支付方式卡片 -->
      <view class="card payment-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper payment-icon">
              <uni-icons type="wallet-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">支付方式</text>
          </view>
        </view>
        
        <view class="payment-content">
          <view class="payment-options">
            <view 
              class="payment-option" 
              :class="{ active: paymentMethod === 'online' }"
              @click="selectPaymentMethod('online')">
              <view class="option-left">
                <view class="payment-logo online-logo">
                  <uni-icons type="wallet" size="24" color="#1AAD19"></uni-icons>
                </view>
                <view class="payment-info">
                  <text class="payment-name">在线支付</text>
                  <text class="payment-desc">微信、支付宝、银行卡</text>
                </view>
              </view>
              <view class="option-right">
                <view class="radio-check" :class="{ checked: paymentMethod === 'online' }">
                  <view class="check-dot" v-if="paymentMethod === 'online'"></view>
                </view>
              </view>
            </view>
            
            <view 
              class="payment-option" 
              :class="{ active: paymentMethod === 'offline' }"
              @click="selectPaymentMethod('offline')">
              <view class="option-left">
                <view class="payment-logo offline-logo">
                  <uni-icons type="shop" size="24" color="#ff6900"></uni-icons>
                </view>
                <view class="payment-info">
                  <text class="payment-name">货到付款</text>
                  <text class="payment-desc">送达时现金支付</text>
                </view>
              </view>
              <view class="option-right">
                <view class="radio-check" :class="{ checked: paymentMethod === 'offline' }">
                  <view class="check-dot" v-if="paymentMethod === 'offline'"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单备注卡片 -->
      <view class="card message-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper message-icon">
              <uni-icons type="chat-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">订单备注</text>
          </view>
          <text class="optional-tag">选填</text>
        </view>
        
        <view class="message-content">
          <view class="message-wrapper">
            <textarea
              v-model="message"
              placeholder="有什么想对商家说的吗？(选填)"
              maxlength="200"
              auto-height
              class="message-textarea"
              @focus="inputFocused = true"
              @blur="inputFocused = false">
            </textarea>
            <view class="char-count">{{ message.length }}/200</view>
          </view>
        </view>
      </view>

      <!-- 费用明细卡片 -->
      <view class="card price-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper price-icon">
              <uni-icons type="wallet-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">费用明细</text>
          </view>
        </view>
        
        <view class="price-content">
          <view class="price-item">
            <text class="price-label">商品总价</text>
            <text class="price-value">¥{{ totalPrice.toFixed(2) }}</text>
          </view>
          
          <view class="price-item">
            <text class="price-label">配送费</text>
            <text class="price-value" :class="{ 'free-text': shippingFee === 0 }">
              {{ shippingFee > 0 ? `¥${shippingFee.toFixed(2)}` : '免费' }}
            </text>
          </view>
          
          <view class="price-item" v-if="paymentMethod === 'offline'">
            <text class="price-label">服务费</text>
            <text class="price-value">¥{{ serviceFee.toFixed(2) }}</text>
          </view>
          
          <view class="price-divider"></view>
          
          <view class="price-item total-item">
            <text class="price-label total-label">实付金额</text>
            <text class="price-value total-value">¥{{ finalPrice.toFixed(2) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提交区域 -->
    <view class="submit-section">
      <view class="submit-info">
        <view class="payment-method">
          <text class="method-label">支付方式：</text>
          <text class="method-value">{{ paymentMethod === 'online' ? '在线支付' : '货到付款' }}</text>
        </view>
        <view class="total-info">
          <text class="total-label">合计：</text>
          <text class="total-amount">¥{{ finalPrice.toFixed(2) }}</text>
        </view>
      </view>
      <view 
        class="submit-button" 
        :class="{ disabled: !canSubmit }"
        @click="createOrder">
        <view class="button-content">
          <text class="button-text">{{ getSubmitButtonText() }}</text>
          <uni-icons v-if="canSubmit" type="right" size="16" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: null,
      goodsList: [],
      paymentMethod: 'online',
      message: '',
      shippingFee: 0,
      serviceFee: 0,
      inputFocused: false,
      orderData: null
    }
  },
  
  computed: {
    totalPrice() {
      return this.goodsList.reduce((total, item) => {
        return total + parseFloat(item.price) * parseInt(item.quantity)
      }, 0)
    },
    
    finalPrice() {
      let price = this.totalPrice + this.shippingFee
      if (this.paymentMethod === 'offline') {
        price += this.serviceFee
      }
      return Math.max(price, 0)
    },
    
    canSubmit() {
      return this.address && this.goodsList.length > 0 && this.paymentMethod
    }
  },
  
  onLoad(options) {
    if (options.orderData) {
      try {
        this.orderData = JSON.parse(decodeURIComponent(options.orderData))
      } catch (error) {
        uni.showToast({
          title: '订单数据解析失败',
          icon: 'none'
        })
      }
    }
    
    this.loadDefaultAddress()
  },
  
  onShow() {
    const selectedAddress = uni.getStorageSync('selectedAddress')
    if (selectedAddress) {
      this.address = selectedAddress
      uni.removeStorageSync('selectedAddress')
    }
  },
  
  methods: {
    async loadDefaultAddress() {
      try {
        const addressRes = await getDefaultAddress()
        if (addressRes && addressRes.data) {
          this.address = addressRes.data
        }
      } catch (error) {
        // 获取默认地址失败时保持为空
      }
    },
    
    calculateFees() {
      if (this.totalPrice >= 99) {
        this.shippingFee = 0
      } else {
        this.shippingFee = 8
      }
      this.serviceFee = this.paymentMethod === 'offline' ? 3 : 0
    },
    
    selectPaymentMethod(method) {
      this.paymentMethod = method
      this.calculateFees()
    },
    
    getSubmitButtonText() {
      if (!this.address) {
        return '请选择收货地址'
      }
      return this.paymentMethod === 'online' ? '立即支付' : '提交订单'
    },
    
    selectAddress() {
      uni.navigateTo({
        url: '/pages/address/list?from=order'
      })
    },
    
    async createOrder() {
      if (!this.canSubmit) {
        if (!this.address) {
          uni.showToast({
            title: '请选择收货地址',
            icon: 'none'
          })
        }
        return
      }
      
      try {
        uni.showLoading({
          title: '正在提交订单...'
        })
        
        const orderData = {
          addressId: this.address.id,
          goodsList: this.goodsList.map(item => ({
            goodsId: item.goodsId,
            specId: item.specId,
            quantity: item.quantity,
            price: item.price
          })),
          paymentMethod: this.paymentMethod,
          message: this.message,
          totalPrice: this.totalPrice,
          shippingFee: this.shippingFee,
          serviceFee: this.serviceFee,
          finalPrice: this.finalPrice
        }
        

        
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        uni.hideLoading()
        
        const orderId = 'ORD' + Date.now()
        
        if (this.paymentMethod === 'online') {
          uni.redirectTo({
            url: `/pages/order/pay?orderId=${orderId}&amount=${this.finalPrice}`
          })
        } else {
          uni.showToast({
            title: '订单提交成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.redirectTo({
              url: `/pages/order/detail?orderId=${orderId}`
            })
          }, 1500)
        }
        
      } catch (error) {
        uni.hideLoading()

        uni.showToast({
          title: error.message || '订单提交失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.order-confirm {
  min-height: 100vh;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 140rpx;
}

/* 页面头部 */
.page-header {
  position: relative;
  height: 200rpx;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-content {
  position: relative;
  z-index: 2;
  padding: 60rpx 40rpx 40rpx;
  color: #fff;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 内容容器 */
.content-container {
  padding: 20rpx;
  margin-top: -40rpx;
  position: relative;
  z-index: 10;
}

/* 卡片通用样式 */
.card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
}

.card-header {
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.address-icon {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.goods-icon {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.payment-icon {
  background: linear-gradient(135deg, #45b7d1, #96c93d);
}

.message-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.price-icon {
  background: linear-gradient(135deg, #fce38a, #f38181);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

/* 收货地址卡片 */
.address-content {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.address-main {
  flex: 1;
}

.contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.contact-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-right: 24rpx;
}

.contact-phone {
  font-size: 28rpx;
  color: #7f8c8d;
}

.address-text {
  font-size: 28rpx;
  color: #7f8c8d;
  line-height: 1.6;
}

.address-badge {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  margin-top: 8rpx;
}

.address-empty {
  padding: 60rpx 32rpx;
  display: flex;
  align-items: center;
}

.empty-icon {
  width: 80rpx;
  height: 80rpx;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.empty-content {
  flex: 1;
}

.empty-title {
  font-size: 28rpx;
  color: #2c3e50;
  display: block;
  margin-bottom: 8rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #95a5a6;
  display: block;
}

/* 商品信息卡片 */
.goods-count {
  font-size: 24rpx;
  color: #7f8c8d;
  background: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.goods-content {
  padding: 0 32rpx 32rpx;
}

.goods-item {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f7fa;
  position: relative;
}

.goods-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 24rpx;
  position: relative;
}

.item-image image {
  width: 100%;
  height: 100%;
}

.item-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #ff4757;
  color: #fff;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  font-weight: bold;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.item-spec {
  font-size: 24rpx;
  color: #95a5a6;
  margin-bottom: 8rpx;
}

.item-price {
  font-size: 32rpx;
  color: #ff4757;
  font-weight: bold;
}

/* 支付方式卡片 */
.payment-content {
  padding: 0 32rpx 32rpx;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.payment-option {
  padding: 24rpx;
  border: 2rpx solid #e9ecef;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.payment-option.active {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}

.option-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.payment-logo {
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.online-logo {
  background: rgba(26, 173, 25, 0.1);
}

.offline-logo {
  background: rgba(255, 105, 0, 0.1);
}

.payment-info {
  display: flex;
  flex-direction: column;
}

.payment-name {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
  margin-bottom: 4rpx;
}

.payment-desc {
  font-size: 24rpx;
  color: #95a5a6;
}

.radio-check {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #dee2e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-check.checked {
  border-color: #667eea;
  background: #667eea;
}

.check-dot {
  width: 16rpx;
  height: 16rpx;
  background: #fff;
  border-radius: 50%;
}

/* 订单备注卡片 */
.optional-tag {
  font-size: 20rpx;
  color: #95a5a6;
  background: #f8f9fa;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
}

.message-content {
  padding: 32rpx;
}

.message-wrapper {
  position: relative;
}

.message-textarea {
  width: 100%;
  min-height: 120rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #2c3e50;
  border: none;
  resize: none;
}

.char-count {
  position: absolute;
  bottom: 16rpx;
  right: 20rpx;
  font-size: 20rpx;
  color: #bdc3c7;
}

/* 费用明细卡片 */
.price-content {
  padding: 0 32rpx 32rpx;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.price-label {
  font-size: 28rpx;
  color: #7f8c8d;
}

.price-value {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
}

.free-text {
  color: #27ae60;
}

.price-divider {
  height: 1rpx;
  background: #e9ecef;
  margin: 16rpx 0;
}

.total-item {
  padding: 24rpx 0 0;
}

.total-label {
  font-size: 32rpx;
  color: #2c3e50;
  font-weight: bold;
}

.total-value {
  font-size: 36rpx;
  color: #e74c3c;
  font-weight: bold;
}

/* 底部提交区域 */
.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx;
  border-top: 1rpx solid #e9ecef;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.submit-info {
  margin-bottom: 20rpx;
}

.payment-method {
  margin-bottom: 8rpx;
}

.method-label {
  font-size: 24rpx;
  color: #7f8c8d;
}

.method-value {
  font-size: 24rpx;
  color: #2c3e50;
  font-weight: 500;
}

.total-info {
  display: flex;
  align-items: baseline;
}

.total-label {
  font-size: 28rpx;
  color: #2c3e50;
  margin-right: 8rpx;
}

.total-amount {
  font-size: 40rpx;
  color: #e74c3c;
  font-weight: bold;
}

.submit-button {
  height: 88rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.submit-button.disabled {
  background: #bdc3c7;
}

.submit-button:active:not(.disabled) {
  transform: scale(0.98);
}

.button-content {
  display: flex;
  align-items: center;
}

.button-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  margin-right: 8rpx;
}
</style>    